<template>
  <div class='article-container'>
    <!-- 表单区域 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <my-breadcrumb></my-breadcrumb>
      </div>
      <el-form label-width="80px">

        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <!-- el-radio来说道，label决定用户选中的值 -->
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 添加自定义事件的监听
          在组件上使用v-model,
          <com-a v-model="msg"></com-a>
          相当于：
          <com-a :value="msg" @input=(val)=>{this.msg = val}></com-a>
          做了两件事：
          （1）给组件传了一个名为value的属性
           (2) 在组件监听了input事件，并在回调中修改v-model中的绑定的数据
        -->
        <!-- <my-channel @input="hInput"></my-channel> -->
        <my-channel v-model="form.channel_id"></my-channel>

        <el-form-item label="日期">
          <!--
            value-format: 格式化选中的日期
            type: daterange： 表示一个时间区间. 是组件date-picker中的
                  type属性的值
          -->
          <el-date-picker
            v-model="form.dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="hQuery" :loading="isLoading">查询</el-button>
        </el-form-item>
      </el-form>

    </el-card>

    <!-- 表格区域 -->
    <el-card class="box-card" style="margin-top:20px;">
      <div slot="header" class="clearfix">
        <span>查询到{{total_count}}条结果</span>
      </div>
      <!--
        el-table
          data:用来指定数据源（表格中的数据从哪里来）
        el-table-column 表示表格中的列
          prop： 指定数据来源：这一列的数据是对象中的哪个字段？ "date"
          label：这一列对应的表头 ="日期"
          width: 这一列的宽度。 如果没有设置width，则会自动分配。建议留一个不去设置！

        template：只是一个逻辑上的容器，它并不会产生真实的dom
        scope: 用来获取当前行的数据.  scope.row表示当前行的数据

        v-loading: element-ui中提供的自定义指令。
      -->
      <el-table
        v-loading="isLoading"
        :data="articles"
        style="width: 100%">
        <el-table-column
          label="封面"
          width="180">
          <template slot-scope="scope">
            <!-- slot-scope: 作用域插槽  获取当前行的数据-->
            <!-- scope.row：表示当前行 -->
            <!-- 自己去定义要如何显示这个内容 -->
            <!-- <el-image :src="scope.row.cover.images[0]" /> -->
            <el-image
                style="width: 150px; height: 100px"
                :src="scope.row.cover.images[0]">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
              </el-image>
          </template>
        </el-table-column>

        <el-table-column
          prop="title"
          label="标题"
          width="180">
        </el-table-column>

        <el-table-column
          label="状态">
          <!-- 1. 去掉prop
          2. 自定义插槽内容 -->
          <template slot-scope="scope">
            <el-tag :type='scope.row.status | fStatusType'>{{scope.row.status | fStatusText}}</el-tag>
            <!-- 状态编号： {{scope.row.status}} -->
            <!-- <el-tag v-if="scope.row.status===0" type="info">草稿</el-tag>
            <el-tag v-else-if="scope.row.status===1" type="success">待审核</el-tag>
            <el-tag v-else-if="scope.row.status===2">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status===3" type="warning">审核失败</el-tag>
            <el-tag v-else-if="scope.row.status===4" type="danger">已删除</el-tag>
            <el-tag v-else type="danger">unknow</el-tag> -->
          </template>
        </el-table-column>

        <el-table-column
          prop="pubdate"
          label="发布时间">
        </el-table-column>

        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <!--
              scope.$index: 就是当前的行号
              scope.row： 就是当前行的数据
            -->
            <el-button
              size="mini"
              :circle="true"
              icon="el-icon-edit"
              @click="hEdit(scope.row)"></el-button>
            <el-button
              size="mini"
              circle
              type="danger"
              icon="el-icon-delete"
              @click="hDelete(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页
        total: 一共有多少条数据
        page-size: 一页显示几条数据 默认是10条
        current-change:点击页码时，它会触发
      -->
      <el-pagination
        :disabled="isLoading"
        background
        layout="prev, pager, next"
        :page-size="10"
        @current-change="hCurrentChange"
        :total="total_count">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
// 1. 引入
import MyChannel from '../../components/MyChannel.vue'
// import MyBreadcrumb from '../../components/MyBreadcrumb.vue'
// 2. 注册
// 3. 使用
export default {
  name: 'articles',
  components: {
    MyChannel: MyChannel
    // MyBreadcrumb
  },
  data () {
    return {
      isLoading: false, // 是否正在查询
      form: {
        channel_id: null,
        status: null, // 状态
        dateRange: ''
      },
      page: 1, // 当前查询的页码
      total_count: 0, // 查询到的总数量
      // 表格数据源： 它是一个数组，每条数据都是一个对象， 对应着表格中一行。对象是一个键值对
      articles: [] // 表格数据
    }
  },
  created () {
    // 发请求
    this.loadArticles()
  },
  filters: {
    fStatusType (status) {
      // console.log('要过滤的数据', status)
      // 这里是一个对象，属性名是一个数值。 由它来定义这个映射关系。
      // 策略模式： 23种设计模式中的一种
      const texts = {
        0: 'info',
        1: 'normal',
        2: 'success',
        3: 'warning',
        4: 'danger'
      }
      // 通过[]来取对象的属性值
      return texts[status]
    },
    // 0 --> 草稿
    // 1 --> 待审核
    fStatusText (status) {
      // console.log('要过滤的数据', status)
      // 这里是一个对象，属性名是一个数值。 由它来定义这个映射关系。
      const texts = {
        0: '草稿',
        1: '待审核',
        2: '审核通过',
        3: '审核失败',
        4: '已删除'
      }
      // 通过[]来取对象的属性值
      return texts[status]
      // if (status === 0) {
      //   return '草稿'
      // } else if ()
    }
  },
  methods: {
    // hInput (channelId) {
    //   console.log('父组件收到了子组件传递的数据', channelId)
    //   this.form.channel_id = channelId
    // },
    hQuery () {
      this.loadArticles()
    },
    // 专门写一个函数，来收集用户的查询条件
    buildParams () {
      // status        否 文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败，4-已删除，不传为全部
      // channel_id    否  频道 id，不传为全部
      // begin_pubdate 否  2019-01-01 起始时间，不传就不限定开始时间
      // end_pubdate   否  2019-01-02 截止时间，不传就不限定结束时间
      // page          否        页数，默认是 1
      // per_page      否        每页数量，默认每页 10 条
      const { dateRange, status } = this.form

      // 在传递参数给后端时，channel_id='' 和channel_id=null是两个完全不同的概念！
      // 如果一个参数是null,则 axios就不会向后端传参了
      const channelId = this.form.channel_id === '' ? null : this.form.channel_id

      const params = {
        channel_id: channelId, // 频道id
        page: this.page, // 页码
        status: status // 状态
      }

      if (dateRange) {
        params.begin_pubdate = dateRange[0]
        params.end_pubdate = dateRange[1]
      }

      // 返回一个 条件 对象
      return params
    },
    async loadArticles () {
      // 1. 获取查询条件
      const params = this.buildParams()

      this.isLoading = true // 加载中

      // 2. 带参数发请求
      try {
        const res = await this.$axios({
          method: 'GET',
          url: '/mp/v1_0/articles',
          // get请求，使用params传值
          // 如果某个参数的值是null，则axios会忽略这个参数
          // 就相当于没有选这个参数
          params: params
        })
        console.log(res)
        // 3. 保存数据到数据项
        this.articles = res.data.data.results
        this.total_count = res.data.data.total_count
      } catch (err) {
        console.log(err)
        // 发生错误，清空数据
        this.articles = []
      }

      this.isLoading = false // 加载结束
    },
    hCurrentChange (curPage) {
      // curPage会自动传入，表示当前的页码
      console.log('现在要显示', curPage)
      // 1. 更新页码
      this.page = curPage
      // 2. 重发请求
      this.loadArticles()
    },
    // 用户点击了编辑按钮
    hEdit (row) {
      const id = row.id.toString()
      // console.log(index, row)
      // 路由转跳
      // this.$router.push('/edit?id=' + id)
      // this.$router.push({
      //  path: '/edit',
      //  query: {
      //     id: id,
      //     a: 1,
      //     b: 2
      //   }
      // })
      // this.$router.push('/edit/' + id)
      this.$router.push({
        name: 'edit',
        params: {
          id: id,
          a: 1,
          b: 2
        }
      })
    },
    async doDelete (id) {
      try {
        const res = await this.$axios({
          method: 'DELETE',
          url: '/mp/v1_0/articles/' + id
        })
        console.log(res)
        // 删除成功
        this.$message.success('删除成功')
        this.loadArticles()
      } catch (err) {
        console.log(err)
        this.$message.error('删除失败')
      }
    },
    hDelete (row) {
      this.$confirm('你真的要删除吗').then(() => {
        // 由于id可能是一个大数，所以要转回来
        const id = row.id.toString()
        console.log('当前要删除的文章编号是', id)
        this.doDelete(id)
      }).catch(() => {
        console.log('取消了删除')
      })
    }
  }
}
</script>
